import { createApp } from "vue";
import App from "./App.vue";

import { createRouter, createWebHistory } from "vue-router";

import Home from "./Home.vue";
import Shop from "./Shop.vue";
import NotFound from "./404.vue";

const router = createRouter({
  // mode:'history'
  history: createWebHistory(),
  routes: [
    {
      path: "/home",
      component: Home,
      beforeEnter(to, from, next) {
        console.log("home beforeEnter");
        next();
      },
    },
    {
      path: "/shop/:id/list/:lid",
      component: Shop,
    },
    {
      path: "/:path(\\d+)",
      component: NotFound,
    },
  ],
});
router.beforeEach((to, from, next) => {
  console.log("beforeEach");
  next();
});
router.beforeResolve((to, from, next) => {
  console.log("beforeResolve");
  next();
});
router.afterEach((to, from) => {
  console.log("afterEach");
});

// setup
// onBeforeRouteLeave->beforeEach->beforeEnter->beforeResolve->afterEach

// beforeEach->onBeforeRouteUpdate->beforeResolve->afterEach
const app = createApp(App);
app.use(router); //router.install(app)
app.mount("#app");
